import React from 'react';
import { inject, observer } from 'mobx-react';
import { Route, withRouter, Switch, Redirect } from 'react-router-dom';
import { TabPage } from 'weaver-mobile-page';
import MyAttention from './MyAttention';
import ShareToMe from './ShareToMe';
import Organization from './Organization';
import { Tools } from 'weaver-mobile';

const getLabel = Tools.getLabel;

const store = [
  'blogHomeStore',
  'blogAttentionStore',
]
@withRouter
@inject(...store)
@observer
export default class BlogAttention extends React.Component {
  static defaultProps = {
    prefixCls: 'blog-center-attention'
  }

  componentWillUnmount () {
    const { blogAttentionStore:{ clearState } } = this.props;
    clearState();
  }

  // 根据路由获得当前的page
  getPage = () => {
    const path = this.props.location.pathname;
    switch(path) {
      case '/userCenter/blogAttention/attention': return 0;
      case '/userCenter/blogAttention/organization': return 1;
      case '/userCenter/blogAttention/share': return 2;
      default: return;
    }
  }

  tabChange = (tab, index) => {
    const { blogAttentionStore:{ clearState,setType } } = this.props;
    clearState();
    if(index==2){
        setType("share");
    }else if(index==1){
        setType("org");
    }else if(index==0){
      setType("attention");
    }

    switch (index) {
      case 0: {
        this.props.history.push('/userCenter/blogAttention/attention');
        break;
      }
      case 1: {
        this.props.history.push('/userCenter/blogAttention/organization');
        break;
      }
      case 2: {
        this.props.history.push('/userCenter/blogAttention/share');
        break;
      }
    }
  }

  render() {
    const {prefixCls} = this.props;
    // const tabs = [
    //   {title: getLabel(26469, '我的关注')},
    //   {title: getLabel(16455, '组织结构')},
    //   {title: getLabel(33311, '分享给我')},
    // ]
    return (
    <div className={prefixCls}>
      {/* <TabPage 
        tabs={tabs}
        tabProps = {{
          page: this.getPage(),
          onChange: (tab, index) => this.tabChange(tab, index),
        }}
      /> */}
      <Switch>
        <Route key="attention" path="/userCenter/blogAttention/attention" render={() => <MyAttention parentPath="/userCenter/blogAttention/attention" />}/>
        <Route key="organization" path="/userCenter/blogAttention/organization" render={() => <Organization parentPath="/userCenter/blogAttention/organization" />}/>
        <Route key="share" path="/userCenter/blogAttention/share" render={() => <ShareToMe parentPath="/userCenter/blogAttention/share" />}/>
        <Redirect exact path="/userCenter/blogAttention" to={{pathname: '/userCenter/blogAttention/attention'}} />
      </Switch>
    </div>)
  }
}